<template>
  <div class="user_list">
    <!-- 用户列表数据 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item>
          <el-input type="text" placeholder="输入内容" size="small" v-model="keyword" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="levelId" placeholder="请选择">
            <el-option v-for="item in userLevel" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="small" @click="getUserList">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="small" @click="user_form = true">添加用户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--   用户列表数据 -->
      <el-table  :data="userlist" style="width: 100%" border >
        <el-table-column prop="date" label="会员" width="180">
          <template slot-scope="scope">
            <div>
              <el-image :src="scope.row.avatar" style="width:60px" />
              {{scope.row.username}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user_level.name" label="会员等级" width="180"></el-table-column>
        <el-table-column prop="address" label="登陆注册">
          <template slot-scope="scope">
            <div>注册时间：{{scope.row.create_time}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="状态">
          <template slot-scope="scope">
            <div>
              <el-button type="danger" size="mini" v-if="scope.row.status == 0">禁用</el-button>
              <el-button type="success" size="mini" v-else>启用</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
        <div id="page">
        <el-pagination
          @size-change="changeSize"
          @current-change="changePage"
          :current-page="page"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    <!--  添加用户 对话框显示 -->
    <el-dialog title="添加用户" :visible.sync="user_form">
      <el-form>
        <el-form-item label="用户名" :label-width="'80px'">
          <el-input v-model="users.username" autocomplete="off" placeholder="用户名字" size="small"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="'80px'">
          <el-input v-model="users.password" autocomplete="off" placeholder="密码" size="small"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="'80px'">
          <el-input v-model="users.nickname" autocomplete="off" placeholder="昵称" size="small"></el-input>
        </el-form-item>

        <el-form-item label="头像" :label-width="'80px'">
          <el-button
            icon="el-icon-plus"
            size="small"
            @click="sel_img=true"
            v-if="users.avatar== ''"
          ></el-button>
          <el-image
            :src="users.avatar"
            v-else
            style="width:80px;border-radius:5px;"
            @click="sel_img=true"
          />
        </el-form-item>
        <el-form-item label="会员等级" :label-width="'80px'">
          <el-select v-model="users.user_level_id" placeholder="请选择" size="small">
            <el-option v-for="item in userLevel" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="手机" :label-width="'80px'">
          <el-input v-model="users.phone" autocomplete="off" placeholder="手机" size="small"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" :label-width="'80px'">
          <el-input v-model="users.email" autocomplete="off" placeholder="邮箱" size="small"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="'80px'">
          <el-radio :label="1" v-model="users.status" border size="small">启用</el-radio>
          <el-radio :label="0" v-model="users.status" border size="small">禁用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="user_form = false">取 消</el-button>
        <el-button type="primary" @click="addUser">添 加</el-button>
      </div>
    </el-dialog>

    <!--  选择头像的信息 -->
    <el-dialog title="图片管理" :visible.sync="sel_img" width="80%" @open="getImgClass">
      <div class="imgList">
        <el-container>
          <!--  左侧分类 -->
          <el-aside>
            <ul>
              <li
                v-for="(item,index) in classList"
                :key="index"
                :class="{act:item.id==cid}"
                @click="changeLeft(item.id)"
              >
                <span>{{item.name}}</span>
                <span>{{item.images_count}}</span>
              </li>
            </ul>
          </el-aside>
          <!-- 图片列表 -->
          <el-main>
            <el-row :gutter="20">
              <el-col :span="6" v-for="(item, index) in imgList" :key="index">
                <el-card :body-style="{ padding: '0px'}">
                  <el-image
                    :src="item.url"
                    style="width:100%;height:150px;"
                    @click="selectImg(item.url)"
                  />
                  <div style="padding: 14px;">
                    <span>{{item.name}}</span>
                    <span>sda</span>
                    <div class="bottom clearfix">
                      <input type="checkbox" />
                      <el-button type="text" class="button" icon="el-icon-edit"></el-button>
                      <el-button type="text" class="button" icon="el-icon-delete"></el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userlist: [],
      userLevel: [],
      keyword: "",
      levelId: "",
      page: 1,
      limit: 3,
      total: 0,

      //  添加用户
      user_form: false,
      users: {
        username: "",
        password: "",
        nickname: "",
        avatar: "",
        user_level_id: "",
        phone: "",
        email: "",
        status: 1
      },

      // 选择图片
      sel_img: false,
      classList: [],
      cid: "", // 相册分类id
      imgList: []
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    // 获取用户列表数据
    getUserList() {
      this.$axios
        .get(
          `/admin/user/${this.page}?limit=${this.limit}&keyword=${this.keyword}&user_level_id=${this.levelId}`
        )
        .then(res => {
          this.userlist = res.data.list;
          this.userLevel = res.data.user_level;
          this.total = res.data.totalCount;
        })
        .catch(error => {
          console.log(error.response.data);
        });
    },
    // 添加用户的操作
    addUser() {
      if (this.users.username == "" || this.users.password == "") {
        this.$message.error("信息不能为空");
        return false;
      }
      this.$axios
        .post("/admin/user", this.users)
        .then(res => {
          this.$message.success("添加会员成功");
          this.getUserList();
          this.user_form = false;
        })
        .catch(error => {
          this.$message.error(error.response.data.msg);
          return false;
        });
    },

    //获取图片相册列表
    getImgClass() {
      this.$axios
        .get("/admin/imageclass/1")
        .then(res => {
          this.classList = res.data.list;
          this.cid = res.data.list[0].id;
          this.getImgList();
        })
        .catch(error => {});
    },

    // 获取右侧的图片列表数据
    getImgList() {
      this.$axios
        .get(`/admin/imageclass/${this.cid}/image/1`)
        .then(res => {
          this.imgList = res.data.list;
        })
        .catch(error => {});
    },
    // 选择头像的信息
    selectImg(url) {
      this.users.avatar = url;
      this.sel_img = false;
    },

    // 点击左侧菜单栏切换
    changeLeft(id) {
      this.cid = id; // 改变id的值
      this.page = 1;
      this.getImgList();
    },

    changeSize(size) {
      this.limit = size;
      this.getUserList();
    },
    changePage(page) {
      this.page = page;
      this.getUserList();
    }
  }
};
</script>

<style lang="scss"  scoped>
.user_list{
  width: 100%;
  height: 500px;
  .el-table{
    height: 400px;
    overflow: auto;
  }
}
.search {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.imgList {
  width: 100%;
  .el-aside {
    ul {
      height: 400px;
      overflow: auto;
      width: 100%;
      padding: 0;
      li {
        padding: 20px 10px;
        border-bottom: #dddddd 1px solid;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
      li.act {
        color: #67c23a;
        background: #f0f9ed;
      }
    }
  }
  .el-main {
    height: 400px;
    overflow: auto;
    .el-card {
      margin-bottom: 15px;
    }
  }
}
</style>
